<template>
  <div style="text-align: left">
    <el-button class="add-button" type="success" @click="dialogFormVisible = true; updateRoomStatus = false">添加房型</el-button>
    <el-dialog
      title="添加房型"
      :visible.sync="dialogFormVisible"
      @close="clear">
      <el-form :rules="rules" :model="form" style="text-align: left" ref="form">
        <el-form-item label="房号" :label-width="formLabelWidth" prop="roomNumber">
          <el-row v-text="form.roomNumber" v-if="this.updateRoomStatus === true"> </el-row>
          <el-input v-if="this.updateRoomStatus === false" v-model="form.roomNumber" autocomplete="off" placeholder="例：101"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" :label-width="formLabelWidth" prop="roomInformation">
          <el-select v-model="form.roomInformation" placeholder="请选择房间类型">
            <el-option label="舒适大床房" value="舒适大床房"></el-option>
            <el-option label="舒适双床房" value="舒适双床房"></el-option>
            <el-option label="豪华大床房" value="豪华大床房"></el-option>
            <el-option label="豪华双床房" value="豪华双床房"></el-option>
            <el-option label="总统大床房" value="总统大床房"></el-option>
            <el-option label="总统双床房" value="总统双床房"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间详情" :label-width="formLabelWidth" prop="roomIntroduction">
        <el-input type="textarea" v-model="form.roomIntroduction" autocomplete="off" placeholder="记录房费，是否提供餐食。"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'RoomEditForm',
    data () {
      return {
        dialogFormVisible: false,
        updateRoomStatus: false,
        form: {
          roomNumber: '',
          roomInformation: '',
          roomIntroduction: '',
          roomReserved: ''
        },
        rules:{
          roomNumber: [{required: true, message: '请输入房号', trigger:'blur'}],
          roomInformation: [{required: true, message: '请输入房间类型', trigger:'blur'}],
          roomIntroduction: [{required: true, message: '请输入房间详情', trigger:'blur'}]
        },
        allFreeRoom:[],
        formLabelWidth: '120px'
      }
    },
    methods: {
      clear () {
        this.form = {
          roomNumber: '',
          roomInformation: '',
          roomIntroduction: '',
          roomReserved: ''
        };
        this.allFreeRoom = [];
      },
      onSubmit () {
        if (this.updateRoomStatus === false) {
          this.$axios
            .post('/insertRoom', {
              roomNumber: this.form.roomNumber,
              roomInformation: this.form.roomInformation,
              roomIntroduction: this.form.roomIntroduction,
              roomReserved: this.form.roomReserved
            }).then(resp => {
            if (resp && resp.code === 200) {
              this.dialogFormVisible = false;
              this.updateRoomStatus = false;
              this.$emit('onSubmit')
            }
          })
        }else {
          this.$axios.post('/updateRoom',{
            roomNumber: this.form.roomNumber,
            roomInformation: this.form.roomInformation,
            roomIntroduction: this.form.roomIntroduction,
            roomReserved: this.form.roomReserved
          }).then(resp => {
            if(resp && resp.code === 200){
              this.dialogFormVisible = false;
              this.updateRoomStatus = false;
              this.$emit('onSubmit')
            }
          })
        }
      },
    }
  }
</script>

<style scoped>
  .add-button {
    margin: 18px 0 0 10px;
  }
</style>
